<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.js"></script>
  <!-- <script src="./vue@2.6.js"></script> -->
  <title>Document</title>
</head>

<body>
  <div>
    见我写的源码注释,代码关联性比较高需要结合js代码分析
  </div>

  <button onclick="handleAddClick()">setjj</button>
  <button onclick="handleDelClick()">deletejj</button>

  <!-- 目前没有写匹配注释的东西，注释会出问题 -->
  <div style="color: rgb(131, 0, 0); height: 100%;" id="app">
    <div style="background-color: rgb(189, 189, 189); padding: 10px;" key="125">{{ jj }}</div>
    <div id="fqm" style="background-color: rgb(133, 133, 133); padding: 10px;" key="12315">{{ fqm }}</div>
  </div>

</body>

<!-- dom在script前 -->
<script>
  let vm = new Vue({
    data() {
      return {
        jj: {
          yy: "yysjjd",
          fqm: "fqm",
          dx: "fqmsjjddx",
          obj: {
            yy: "yysjjd",
            fqm: "fqm",
          },
          arr: ["fqm", "yysjjd"]
        },
        fqm: [1, 2, 3, 4, { fqm: "fqmyysjjd" }, [[1]]]
      }
    },
    computed: {
      fqmyysjjd() {
        return jj.fqm + jj.yy
      },
      // fqmyysjjd: {
      //   get() {
      //     return jj.fqm + jj.yy
      //   },
      //   set() {

      //   }
      // },
    },
    el: "#app"
  })

  console.log(vm)

  setTimeout(() => {
    // vm.fqm[4].fqm = 'yysjjd'
    vm.fqm.push('fqmyysjjd')
    vm.$nextTick(() => {
      console.log(document.querySelector("#fqm").innerHTML)
    })
  }, 1000);

  function handleAddClick() {
    // vm.jj.fqmyysjjd = "fqmyysjjd"
    vm.$set(vm.jj, "fqmyysjjd", "fqmyysjjd")
    vm.fqm[5].push(["fqmyysjjd"])

    setTimeout(() => {
      vm.fqm[5][1].push("fqmyysjjd")
    }, 1000);
  }

  function handleDelClick() {
    // delete vm.jj.fqmyysjjd
    vm.$del(vm.jj, "fqmyysjjd")
  }



</script>

</html>

<style>
  html {
    height: 100%;
  }

  body {
    height: 100%;
  }
</style>